<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { store } from '@/store';

const router = useRouter();

// 表单数据
const formData = ref({
  departureTime: '',
  arrivalTime: '',
  departureProvince: '',
  departureCity: '',
  departureDetail: '',
  trips: [
    {
      id: Date.now(),
      transport: '',
      transportInfo: '',
      startProvince: '',
      startCity: '',
      endProvince: '',
      endCity: '',
      tripDepartureTime: '',
      tripArrivalTime: ''
    }
  ]
});

// 导航方法
const goBack = () => {
  router.push('/pages/students/page1');
};

const goToPage2 = () => {
  router.push('/pages/students/page2');
};

const goToPage3 = () => {
  router.push('/pages/students/page3');
};

// 添加行程
const addTrip = () => {
  if (formData.value.trips.length >= 10) {
    uni.showToast({
      title: '最多只能添加10个行程',
      icon: 'none',
      duration: 1500
    });
    return;
  }

  formData.value.trips.push({
    id: Date.now(),
    transport: '',
    transportInfo: '',
    startProvince: '',
    startCity: '',
    endProvince: '',
    endCity: '',
    tripDepartureTime: '',
    tripArrivalTime: ''
  });

  setTimeout(() => {
    const lastTrip = document.querySelector('.form-section:last-child');
    if (lastTrip) {
      lastTrip.scrollIntoView({ behavior: 'smooth' });
    }
  }, 100);
};

// 删除行程
const removeTrip = (id) => {
  if (formData.value.trips.length <= 1) {
    uni.showToast({
      title: '至少保留一个行程',
      icon: 'none',
      duration: 1500
    });
    return;
  }

  uni.showModal({
    title: '确认删除',
    content: '确定要删除该行程吗？',
    success: (res) => {
      if (res.confirm) {
        formData.value.trips = formData.value.trips.filter(trip => trip.id !== id);
      }
    }
  });
};

// 表单验证
const validateForm = () => {
  if (!formData.value.departureTime) return '请填写计划出发时间';
  if (!formData.value.arrivalTime) return '请填写计划到校时间';
  if (!formData.value.departureProvince) return '请选择出发地点省份';
  if (!formData.value.departureCity) return '请选择出发地点城市';
  if (!formData.value.departureDetail) return '请填写详细出发地址';

  for (let i = 0; i < formData.value.trips.length; i++) {
    const trip = formData.value.trips[i];
    if (!trip.transport) return `第${i+1}个行程请选择交通工具`;
    if (!trip.transportInfo) return `第${i+1}个行程请填写交通信息`;
    if (!trip.startProvince) return `第${i+1}个行程请选择出发地省份`;
    if (!trip.startCity) return `第${i+1}个行程请选择出发地城市`;
    if (!trip.endProvince) return `第${i+1}个行程请选择目的地省份`;
    if (!trip.endCity) return `第${i+1}个行程请选择目的地城市`;
    if (!trip.tripDepartureTime) return `第${i+1}个行程请填写出发时间`;
    if (!trip.tripArrivalTime) return `第${i+1}个行程请填写到达时间`;
  }

  return null;
};

// 提交登记
const submitRegistration = () => {
  const errorMsg = validateForm();
  if (errorMsg) {
    uni.showToast({
      title: errorMsg,
      icon: 'none',
      duration: 1500
    });
    return;
  }

  uni.showLoading({
    title: '提交中...'
  });

  setTimeout(() => {
    uni.hideLoading();
    store.updateStatus('submitted', 'return');
    uni.showToast({
      title: '返校登记提交成功',
      icon: 'success',
      duration: 1500
    });
    setTimeout(() => {
      router.push('/pages/students/page1');
    }, 1500);
  }, 1500);
};
</script>

<template>
  <!-- 页面整体容器 -->
  <view class="return-registration-page">
    <!-- 顶部返回区域 -->
    <view class="back-area" @click="goBack">
      <text class="back-icon">←</text>
      <text class="back-text">返回</text>
    </view>

    <!-- 标题 -->


    <!-- 提示栏 -->
    <view class="tip-bar">
      返校登记不需要审批，在2023/11/18 00:00:00之前可以修改！
    </view>

    <!-- 选项卡 -->
    <view class="tabs">
      <view class="tab-item" @click="goToPage2">离校申请</view>
      <view class="tab-item" @click="goToPage3">留校申请</view>
      <view class="tab-item active">返校登记</view>
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <!-- 计划出发时间 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">计划出发时间*</text>
          <textarea
              v-model="formData.departureTime"
              placeholder="请选择计划出发时间"
              class="textarea"
          ></textarea>
        </view>
      </view>

      <!-- 计划到校时间 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">计划到校时间*</text>
          <textarea
              v-model="formData.arrivalTime"
              placeholder="请选择计划到校时间"
              class="textarea"
          ></textarea>
        </view>
      </view>

      <!-- 出发地点 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">出发地点*</text>
          <textarea
              v-model="formData.departureProvince"
              placeholder="请选择省/市/区"
              class="textarea"
          ></textarea>
          <textarea
              v-model="formData.departureCity"
              placeholder="请选择城市"
              class="textarea"
          ></textarea>
          <textarea
              v-model="formData.departureDetail"
              placeholder="请输入详细地址到门牌号"
              class="textarea"
          ></textarea>
        </view>
      </view>

      <!-- 行程信息，动态生成 -->
      <view class="form-section" v-for="(trip, index) in formData.trips" :key="trip.id">
        <view class="form-item">
          <!-- 行程标题与删除按钮 -->
          <view class="trip-header">
            <text class="label">行程信息{{ index + 1 }}</text>
            <text
                class="delete-btn"
                @click="removeTrip(trip.id)"
                v-if="formData.trips.length > 1"
            >
              删除
            </text>
          </view>

          <text class="tip-text">请填写详细行程信息，确保准确无误</text>

          <text class="label">交通工具*</text>
          <textarea
              v-model="trip.transport"
              placeholder="请选择交通工具(如：高铁、飞机、汽车)"
              class="textarea"
          ></textarea>

          <text class="label">交通信息*</text>
          <textarea
              v-model="trip.transportInfo"
              placeholder="请输入车牌号、火车班次、航班号"
              class="textarea"
          ></textarea>

          <text class="label">出发地*</text>
          <textarea
              v-model="trip.startProvince"
              placeholder="请选择省/市/区"
              class="textarea"
          ></textarea>
          <textarea
              v-model="trip.startCity"
              placeholder="请选择城市"
              class="textarea"
          ></textarea>

          <text class="label">目的地*</text>
          <textarea
              v-model="trip.endProvince"
              placeholder="请选择省/市/区"
              class="textarea"
          ></textarea>
          <textarea
              v-model="trip.endCity"
              placeholder="请选择城市"
              class="textarea"
          ></textarea>

          <text class="label">出发时间*</text>
          <textarea
              v-model="trip.tripDepartureTime"
              placeholder="请输入出发时间"
              class="textarea"
          ></textarea>

          <text class="label">到达时间*</text>
          <textarea
              v-model="trip.tripArrivalTime"
              placeholder="请输入到达时间"
              class="textarea"
          ></textarea>
        </view>
      </view>

      <!-- 添加行程按钮 -->
      <view class="add-trip-btn" @click="addTrip">
        <text class="add-icon">+</text>
        <text class="add-text">添加行程</text>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn" @click="submitRegistration">
        提交登记
      </view>
    </view>
  </view>
</template>

<style lang="scss">
/* 基础样式保持与系统一致 */
.return-registration-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 80px;
}

.back-area {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
}
.back-icon {
  font-size: 22px;
  color: #409eff;
  margin-right: 8px;
}
.back-text {
  font-size: 16px;
  color: #409eff;
  font-weight: 500;
}

.page-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 15px 0;
}

.tip-bar {
  background-color: #faad14;
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  margin-bottom: 15px;
}

.tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 16px 0;
  font-size: 16px;
  color: #666;
  position: relative;
  cursor: pointer;
}
.tab-item.active {
  color: #409eff;
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 2px;
  background-color: #409eff;
}

.form-container {
  padding: 0 15px;
}

.form-section {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 18px;
  margin-bottom: 15px;
}

.form-item {
  margin-bottom: 0;
}

.label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  margin-top: 15px;
}
.label:first-child {
  margin-top: 0;
}

/* 按指定格式修改的textarea样式 */
.textarea {
  width: 100%; /* 设置宽度为100%，适应容器 */
  height: 32px; /* 设置高度为32px */
  padding: 6px 15px; /* 减少垂直内边距，避免内容溢出 */
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  min-height: auto; /* 取消最小高度限制 */
  resize: none; /* 禁止调整大小，保持固定尺寸 */
  box-sizing: border-box; /* 确保padding和border包含在设置的尺寸内 */
  line-height: 1; /* 调整行高，使内容垂直居中 */
}
.textarea::placeholder {
  color: #c0c4cc;
}
.textarea:focus {
  outline: none;
  border-color: #409eff;
}

.tip-text {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #999;
  line-height: 1.5;
}

.trip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.delete-btn {
  font-size: 14px;
  color: #f56c6c;
  cursor: pointer;
  padding: 5px 10px;
}

.add-trip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background-color: #f5f7fa;
  border: 2px dashed #e5e5e5;
  border-radius: 5px;
  margin: 15px auto;
  width: 90%;
  cursor: pointer;
  transition: all 0.3s;
}
.add-trip-btn:hover {
  border-color: #409eff;
}
.add-icon {
  font-size: 20px;
  color: #409eff;
  margin-right: 8px;
}
.add-text {
  font-size: 14px;
  color: #409eff;
}

.submit-btn {
  background-color: #409eff;
  color: #fff;
  text-align: center;
  padding: 15px;
  margin: 20px 15px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: background-color 0.3s;
}
.submit-btn:hover {
  background-color: #3388e6;
}
</style>
